<!-- 动态生成单据标题，按钮，季度的组件 -->
<template>
  <div class="quotation-container">
    <div class="header-module">
      <!-- 标题区域 -->
      <div class="header-info">
        <h2 class="title">{{ title }}</h2>
        <span class="period">{{ period }}</span>
      </div>

      <!-- 操作栏 -->
      <!--  动态生成按钮    -->
      <div class="action-bar">
        <div class="left-actions">
          <el-button
            v-for="btn in primaryActions"
            :key="btn.name"
            :type="btn.type || 'primary'"
            @click="emitAction(btn.name)"
            class="compact-btn"
          >
            {{ btn.label }}
          </el-button>
        </div>

        <!-- 右侧操作 -->
        <div class="right-actions">
          <el-dropdown trigger="click">
            <el-button class="more-btn">
              更多<el-icon><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in dropdownActions"
                  :key="item.name"
                  @click="emitAction(item.name)"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '销售报价单'
  },
  period: {
    type: String,
    default: '2022年 02期'
  },
  currentPage: {
    type: Number,
    default: 1
  },
  totalPages: {
    type: Number,
    default: 1
  },
  primaryActions: {
    type: Array as () => Array<{name: string, label: string, type?: string}>,
    default: () => [
      { name: 'save', label: '保存', type: 'primary' },
      { name: 'audit', label: '审核' },
      { name: 'history', label: '历史单据' }
    ]
  },
  dropdownActions: {
    type: Array as () => Array<{name: string, label: string}>,
    default: () => [
      { name: 'options', label: '选项' },
      { name: 'print', label: '打印' },
      { name: 'export', label: '导出' }
    ]
  }
})

const emit = defineEmits(['action'])

const emitAction = (actionName: string) => {
  emit('action', actionName)
}
</script>

<style scoped>
/* 新增关键样式 */
.action-bar {
  display: flex;
  justify-content: space-between; /* 左右分列 */
  align-items: center;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 8px;
}

.right-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 保持原有其他样式不变 */
.quotation-container {
  background: white;
  padding: 16px 24px;
}

.header-info {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.period {
  font-size: 14px;
  color: #606266;
  letter-spacing: 0.5px;
}

.left-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.compact-btn {
  padding: 8px 16px;
  height: 36px;
  font-size: 14px;
  border-radius: 4px;
}

:deep(.el-button--primary) {
  background: #409EFF;
  border-color: #409EFF;
  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
  }
}

.more-btn {
  border-color: #dcdfe6;
  color: #606266;
  padding: 8px 16px;
  height: 36px;
}

:deep(.el-dropdown-menu) {
  min-width: 120px;
}
</style>
